
<template>
	<view class="map">
		<view id="amap" class="amap"></view>
	</view>
</template>

 <script>
	//renderjs运行在视图层的js，只支持app-vue和h5（简单来说就是开了另外一条线程）
	//大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力（减少通讯损耗提升性能，例如一些手势或canvas动画的场景）
	export default {
		data() {
			return {
				map: null,
				layer: null,
				parkList: [],
				markerId: '',
				longitude:'',
				latitude:','
			};
		},
		mounted() {
			if (window.AMap) {
				//todo 如果能访问到AMap直接初始化
				this.initAmap();
			} else {
				//todo 动态引入
				console.log("动态引入")
				const script = document.createElement('script');
				script.src = "https://webapi.amap.com/maps?v=1.4.15&key=4eb525633b5fa48c9b84e0aef02051c9";;
				script.onload = () => {
					//todo 初始化地图
					this.initAmap();
				}
				document.head.appendChild(script);
			}
		},
		created(){
			this.getL()
		},
		methods: {
			getL(){
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						this.longitude=res.longitude;
						
						console.log('当前位置的纬度：' + res.latitude);
						this.latitude=res.latitude
					}
				});
			},
			initAmap() {
				this.map = new AMap.Map('amap', {
					zoom: 30, //显示的缩放级别
					// zooms: [2, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [this.longitude, this.latitude], //todo 中心点坐标
					mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782', //todo 地图样式
					resizeEnable: true
				});
				// var marker = new AMap.Marker({
				// 	position: new AMap.LngLat(108.954239, 34.265472),
				// 	// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				// });
				// this.map.add(marker);
				//todo 地图创建完成 标注点
				this.map.on("complete", () => {
 
					this.createLabelsLayer();
				});
			},
			createLabelsLayer() {
				if (!this.map) return;
				let that = this;
				AMap.plugin('AMap.Geolocation', function() { //AMap.Geolocation插件来实现定位
					var geolocation = new AMap.Geolocation({
						// type: 'wgs84',
						// 是否使用高精度定位，默认：true
						enableHighAccuracy: true,
						// 设置定位超时时间，默认：无穷大
						timeout: 10000,
						// 定位按钮的停靠位置的偏移量
						offset: [10, 20],
						//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
						zoomToAccuracy: true,
						//  定位按钮的排放位置,  RB表示右下
						position: 'RB'
					})
 
					geolocation.getCurrentPosition(function(status, result) {
 
						if (status == 'complete') {
							onComplete(result)
						} else {
							onError(result)
						}
					});
 
					function onComplete(data) {
						// this.getL()
						// data是具体的定位信息
						let marker = new AMap.Marker({
							position: new AMap.LngLat(data.position.lng, data.position.lat),
							// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						});
						that.map.setCenter(new AMap.LngLat(data.position.lng, data.position.lat));
						that.map.setZoom(18);
						that.map.add(marker);
					}
 
					function onError(data) {
						console.log("定位出错");
					}
				})
			}
		},
	};
</script>
<style lang="scss">
    	page{
		width: 100%;
		height: 80%;
	}
	.map {
		width: 100%;
		height: 100%;
	}
 
	#amap {
		width: 100%;
		height: 100%;
	}
</style>